<template>
  <!-- 用户画像页面 -->
  <div class="container">
    <el-row v-if="isCanBack" class="go-back">
      <el-col>
        <el-button class="fr" size="mini" type="success" @click="goBack">返回上一页</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="top-search">
        <el-input
          v-model="topQuery.userId"
          size="small"
          class="w-140"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="请输入用户ID"
          @keyup.enter.native="search1()"/>
        <el-input
          v-model="topQuery.memberId"
          size="small"
          class="w-140"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="请输入会员ID"
          @keyup.enter.native="search1()"/>
        <el-autocomplete
          v-model="topQuery.tel"
          :fetch-suggestions="querySearch"
          type="text"
          class="inline-input"
          oninput="value=value.replace(/[^\d]/g,'')"
          clearable
          size="small"
          placeholder="请输入手机号"
          @keyup.enter.native="search1()"/>
        <el-button size="small" type="primary" @click="search1()">搜索</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-t-15">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户基本信息</span>
          </div>
          <div class="text item user-detail">
            <div v-if="JSON.stringify(userDetail) !=='{}'">
              <p><span>用户ID:</span><span>{{ userDetail.userId || '' }}</span></p>
              <p><span>会员ID:</span><span>{{ userDetail.memberId || '' }}</span></p>
              <p><span>用户名称:</span><span>{{ userDetail.nickName || '' }}</span></p>
              <p><span>手机号:</span><span>{{ userDetail.tel || '' }}</span></p>
              <p><span>注册时间:</span><span>{{ userDetail.regTime | timeFilter }}</span></p>
              <!-- <el-><span>第一次使用时间:</span><span>{{userDetail.firstUseTime | timeFilter}}</span></p> -->
              <p><span>最后使用时间:</span><span>{{ userDetail.lastUseTime | timeFilter }}</span></p>
            </div>
            <div v-else class="nodata">
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              :class="{'active': tagsType=='tag_ch'}"
              class="tab-item"
              @click="tagsType='tag_ch'">用户中文标签</span>
            <span
              :class="{'active': tagsType=='tag_km'}"
              class="tab-item"
              @click="tagsType='tag_km'">用户柬文标签</span>
          </div>
          <div class="text item user-tag">
            <div v-if="userTagData && tagsType=='tag_ch' && (userTagData[0] && userTagData[0].length > 0)">
              <div v-for="item in userTagData[0]" :key="item.tagId" class="tag-item">
                <p class="top">{{ item.tagName + " (" + item.score + '分)' }}</p>
                <p v-for="son in item.children" :key="son.tagId">
                  <span class="left-label">{{ son.tagName }}</span><span>得分: {{ son.score }}</span>
                </p>
              </div>
              <div class="tag-item-btn">
                <el-button type="primary" @click="checkDetail">标签详情</el-button>
              </div>
            </div>
            <div
              v-else-if="userTagData && tagsType=='tag_km' && (userTagData[1] && userTagData[1].length > 0)">
              <div v-for="item in userTagData[1]" :key="item.tagId" class="tag-item">
                <p class="top">{{ item.tagName + " (" + item.score + '分)' }}</p>
                <p v-for="son in item.children" :key="son.tagId">
                  <span class="left-label">{{ son.tagName }}</span><span>得分: {{ son.score }}</span>
                </p>
              </div>
              <div class="tag-item-btn">
                <el-button type="primary" @click="checkDetail(tagsType)">标签详情</el-button>
              </div>
            </div>

            <div
              v-if="userTagData && tagsType=='tag_sv_ch' && (userTagData[0] && userTagData[0].length > 0)">
              <div v-for="item in userTagData[2]" :key="item.tagId" class="tag-item">
                <p class="top">{{ item.tagName + " (" + item.score + '分)' }}</p>

              </div>
              <div class="tag-item-btn">
                <el-button type="primary" @click="checkDetail">标签详情</el-button>
              </div>
            </div>
            <div
              v-else-if="userTagData && tagsType=='tag_sv_km' && (userTagData[1] && userTagData[1].length > 0)">
              <div v-for="item in userTagData[3]" :key="item.tagId" class="tag-item">
                <p class="top">{{ item.tagName + " (" + item.score + '分)' }}</p>

              </div>
              <div class="tag-item-btn">
                <el-button type="primary" @click="checkDetail(tagsType)">标签详情</el-button>
              </div>
            </div>
            <div v-else class="nodata">
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="p-t-35">
      <el-col>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span :class="{'active': isChina2}" class="tab-item" @click="isChina2=true">用户中文关键词</span>
            <span :class="{'active': !isChina2}" class="tab-item" @click="isChina2=false">用户柬文关键词</span>
            <el-switch
              v-model="isFilter"
              :active-value="1"
              :inactive-value="0"
              class="fr"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="filterChange"/>
            <span class="fr" style="margin-right: 10px;">关键词过滤</span>
          </div>
          <div v-show="isChina2" class="text item user-word">
            <div id="word-zh" class="word" style="width: 1000px;height:380px;"/>
          </div>
          <div v-show="!isChina2" class="text item user-word">
            <div id="word-km" class="word" style="width: 1000px;height:380px;"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="p-t-35">
      <el-col>
        <el-tabs ref="tabs" v-model="activeName" type="card">
          <el-tab-pane label="用户阅读（播放）历史表" name="first">
            <el-card class="box-card">
              <div class="text item">
                <el-row>
                  <el-col class="top-search">
                    <el-input
                      v-model="readQuery.tagName"
                      size="small"
                      class="w-140"
                      clearable
                      placeholder="请输入用户标签"/>
                    <el-input
                      v-model="readQuery.newsId"
                      size="small"
                      class="w-140"
                      maxlength="20"
                      clearable
                      oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入资讯ID"/>
                    <el-input
                      v-model="readQuery.title"
                      size="small"
                      class="w-160"
                      clearable
                      placeholder="请输入标题过滤词"/>
                    <label for="">资讯类型</label>
                    <el-select v-model="readQuery.newsType" class="w-140" size="small">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <label for="">语言</label>
                    <el-select v-model="readQuery.lang" class="w-140" size="small">
                      <el-option
                        v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-date-picker
                      v-model="datePicker1"
                      class="w-340"
                      size="small"
                      type="datetimerange"
                      align="right"
                      value-format="yyyy-MM-dd HH:mm:ss"/>
                    <el-button size="small" type="primary" @click="searchReadHistory">搜索</el-button>
                  </el-col>
                </el-row>
                <el-row class="p-t-15 tree">
                  <el-col>
                    <el-table :data="readHistoryData" border>
                      <el-table-column width="155" label="时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.time | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="newsId" width="90" label="资讯ID"/>
                      <el-table-column width="80" label="资讯类型">
                        <template slot-scope="scope">
                          <span>{{ newsTypeMap[scope.row.newsType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="80" label="资讯来源">
                        <template slot-scope="scope">
                          <span>{{ sourceTypeMap[scope.row.sourceType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="标题" width="180">
                        <template slot-scope="scope">
                          <a
                            v-if="scope.row.url"
                            :href="scope.row.url"
                            class="link"
                            target="blank">{{ scope.row.title | titleFilter() }}</a>
                          <span v-else>{{ scope.row.title | titleFilter() }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="80" prop="areaTag" label="地域标签"/>
                      <el-table-column width="210" label="机器标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="[scope.row.machineTag]" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="210" label="人工标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="scope.row.manualTagList" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column prop="readDuration" label="阅读(播放)时长"/>
                      <el-table-column prop="readPercent" label="阅读(播放)百分比"/>

                      <el-table-column width="190" label="操作行为">
                        <template slot-scope="scope">
                          <div class="opt">
                            <el-tag
                              :type="scope.row.isThumbUp ? 'success' : 'info'"
                              class="tag-left fl">点赞</el-tag>
                            <el-tag
                              :type="scope.row.isComment ? 'success' : 'info'"
                              class="tag-left fl">评论</el-tag>
                            <el-tag
                              :type="scope.row.isCollect ? 'success' : 'info'"
                              class="tag-left fl">收藏</el-tag>
                            <el-tag
                              :type="scope.row.isTryShare ? 'success' : 'info'"
                              class="tag-left fl">分享
                            </el-tag>
                            <el-tag
                              :type="scope.row.isUnlike ? 'success' : 'info'"
                              class="tag-left fl">不喜欢</el-tag>
                            <el-tag
                              :type="scope.row.isSearch ? 'success' : 'info'"
                              class="tag-left fl">来自搜索
                            </el-tag>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="得分" width="50"/>
                      <el-table-column width="200" label="用户标签得分">
                        <template slot-scope="scope">
                          <el-tree :data="scope.row.userTagsScore" :props="defaultProps2"/>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div v-if="total1 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="readQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total1"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, readQuery, getReadHistory)"
                    @current-change="(val) => pageChange(val, readQuery, getReadHistory)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="用户搜索历史表" name="second">
            <el-card class="box-card">
              <div class="text item ">
                <el-row class="p-t-15">
                  <el-col>
                    <el-table :data="searchHistoryData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column label="时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.searchTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" label="搜索词"/>
                    </el-table>
                  </el-col>
                </el-row>
                <div v-if="total2 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="searQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total2"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, searQuery, getSearchHistory)"
                    @current-change="(val) => pageChange(val, searQuery, getSearchHistory)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="资讯推荐历史表" name="three">
            <el-card class="box-card">
              <div class="text item ">
                <el-row>
                  <el-col class="top-search">
                    <el-input
                      v-model="recommendQuery.newsId"
                      size="small"
                      class="w-140"
                      maxlength="20"
                      clearable
                      oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入资讯ID"/>
                    <el-input
                      v-model="recommendQuery.title"
                      size="small"
                      class="w-160"
                      clearable
                      placeholder="请输入标题过滤词"/>
                    <label for="">推荐策略</label>
                    <el-select v-model="recommendQuery.combineStrategyName" class="w-260" size="small" @change="getRecommendOption2(2, recommendQuery.combineStrategyName)">
                      <el-option
                        v-for="item in newsRecommaned.combineStrategy"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-select v-model="recommendQuery.sortStrategyName" class="w-260" size="small" @change="getRecommendOption2(3, recommendQuery.combineStrategyName, recommendQuery.sortStrategyName)">
                      <el-option
                        v-for="item in newsRecommaned.sortStrategyName"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-select v-model="recommendQuery.recallStrategyName" class="w-260" size="small">
                      <el-option
                        v-for="item in newsRecommaned.recallStrategyName"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <label for="">资讯类型</label>
                    <el-select v-model="recommendQuery.newsType" class="w-140" size="small">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-date-picker
                      v-model="datePicker4"
                      class="w-340"
                      size="small"
                      type="datetimerange"
                      align="right"
                      value-format="yyyy-MM-dd HH:mm:ss"/>
                    <el-button size="small" type="primary" @click="searchRecommanedHistory">搜索
                    </el-button>
                  </el-col>
                </el-row>
                <el-row class="p-t-15 tree">
                  <el-col>
                    <el-table :data="recommendHistoryData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column width="160" label="推送时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.createTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="160" label="发布时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.releaseTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="batchNo" width="300" label="批次号"/>
                      <el-table-column prop="newsId" width="80" label="资讯ID"/>
                      <el-table-column width="80" label="资讯类型">
                        <template slot-scope="scope">
                          <span>{{ newsTypeMap[scope.row.newsType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="标题" width="180">
                        <template slot-scope="scope">
                          <a
                            v-if="scope.row.url"
                            :href="scope.row.url"
                            class="link"
                            target="blank">{{ scope.row.title | titleFilter() }}</a>
                          <span v-else>{{ scope.row.title | titleFilter() }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="areaTag" width="100" label="地域标签"/>
                      <el-table-column width="210" label="机器标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="[scope.row.machineTag]" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="210" label="人工标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="scope.row.manualTagList" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="100" label="是否曝光">
                        <template slot-scope="scope">
                          <div class="opt">
                            <el-tag
                              :type="scope.row.isExposure ? 'success' : 'info'"
                              class="tag-left fl">曝光
                            </el-tag>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="140" label="推荐策略">
                        <template slot-scope="scope">
                          <span>{{ scope.row.commendStrategyStr }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>

                <div v-if="total5 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="recommendQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total5"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, recommendQuery, getRecommonedHistory)"
                    @current-change="(val) => pageChange(val, recommendQuery, getRecommonedHistory)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="小视频推荐历史表" name="seven">
            <el-card class="box-card">
              <div class="text item ">
                <el-row>
                  <el-col class="top-search">
                    <el-input
                      v-model="vlogQuery.newsId"
                      size="small"
                      class="w-140"
                      maxlength="20"
                      clearable
                      oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入资讯ID"/>
                    <el-input
                      v-model="vlogQuery.title"
                      size="small"
                      class="w-160"
                      clearable
                      placeholder="请输入标题过滤词"/>
                    <label for="">推荐策略</label>
                    <el-select v-model="vlogQuery.combineStrategyName" class="w-260" size="small" @change="getRecommendOption(2, vlogQuery.combineStrategyName)">
                      <el-option
                        v-for="item in vlogRecommaned.combineStrategy"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-select v-model="vlogQuery.sortStrategyName" class="w-260" size="small" @change="getRecommendOption(3, vlogQuery.combineStrategyName, vlogQuery.sortStrategyName)">
                      <el-option
                        v-for="item in vlogRecommaned.sortStrategyName"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-select v-model="vlogQuery.recallStrategyName" class="w-260" size="small">
                      <el-option
                        v-for="item in vlogRecommaned.recallStrategyName"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <el-date-picker
                      v-model="datePicker4"
                      class="w-340"
                      size="small"
                      type="datetimerange"
                      align="right"
                      value-format="yyyy-MM-dd HH:mm:ss"/>
                    <el-button size="small" type="primary" @click="searchVlogHistory">搜索
                    </el-button>
                  </el-col>
                </el-row>
                <el-row class="p-t-15 tree">
                  <el-col>
                    <el-table :data="vlogHistoryData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column width="160" label="推送时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.createTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="160" label="发布时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.releaseTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="batchNo" width="300" label="批次号"/>
                      <el-table-column prop="newsId" width="80" label="资讯ID"/>
                      <el-table-column width="80" label="资讯类型">
                        <template slot-scope="scope">
                          <span>{{ newsTypeMap[scope.row.newsType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="标题" width="180">
                        <template slot-scope="scope">
                          <a
                            v-if="scope.row.url"
                            :href="scope.row.url"
                            class="link"
                            target="blank">{{ scope.row.title | titleFilter() }}</a>
                          <span v-else>{{ scope.row.title | titleFilter() }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="areaTag" width="100" label="地域标签"/>
                      <el-table-column width="210" label="机器标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="[scope.row.machineTag]" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="210" label="人工标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="scope.row.manualTagList" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="140" label="推荐策略">
                        <template slot-scope="scope">
                          <span>{{ scope.row.commendStrategyStr }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div v-if="total6 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="vlogQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total6"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, vlogQuery, vlogRecommanedHistory)"
                    @current-change="(val) => pageChange(val, vlogQuery, vlogRecommanedHistory)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="用户使用时长表" name="six">
            <el-card class="box-card">
              <div class="text item ">
                <el-row class="p-t-15">
                  <el-col>
                    <el-table :data="durationData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column label="时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.dt | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="阅读 ( 播放 ) 时长">
                        <template slot-scope="scope">
                          <span>{{ scope.row.readDuration | minuteFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="使用时长">
                        <template slot-scope="scope">
                          <span>{{ scope.row.allDuration | minuteFilter }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row class="p-t-35">
      <el-col>
        <el-tabs ref="tabs" v-model="activeName2" type="card">
          <el-tab-pane label="用户标签得分实时衰减" name="four">
            <el-card class="box-card">
              <div class="text item ">
                <el-row>
                  <el-col class="top-search">
                    <label for="">得分类型</label>
                    <el-select v-model="realTimeQuery.scoreType" class="w-140" size="small">
                      <el-option key="0" :value="0" label="全部"/>
                      <el-option key="2" :value="2" label="不喜欢得分"/>
                      <el-option key="3" :value="3" label="批次衰减得分"/>
                      <el-option key="6" label="批次衰减补偿得分" value="6"/>
                    </el-select>
                    <el-date-picker
                      v-model="datePicker2"
                      class="w-340"
                      size="small"
                      type="datetimerange"
                      align="right"
                      value-format="yyyy-MM-dd HH:mm:ss"/>
                    <el-button size="small" type="primary" @click="searchRealTime">搜索</el-button>
                  </el-col>
                </el-row>
                <el-row class="p-t-15 tree">
                  <el-col>
                    <el-table :data="RealTimeData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column label="时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.logTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="newsId" label="资讯ID"/>
                      <el-table-column label="标题">
                        <template slot-scope="scope">
                          <a
                            v-if="scope.row.url"
                            :href="scope.row.url"
                            class="link"
                            target="blank">{{ scope.row.title }}</a>
                          <span v-else>{{ scope.row.title }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="210" label="机器标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="[scope.row.machineTag]" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column width="210" label="人工标签与权重">
                        <template slot-scope="scope">
                          <el-tree :data="scope.row.manualTagList" :props="defaultProps"/>
                        </template>
                      </el-table-column>
                      <el-table-column prop="rate" label="得分类型">
                        <template slot-scope="scope">
                          <span>{{ scoreTypeMap[scope.row.scoreType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="衰减值">
                        <template slot-scope="scope">
                          <el-tree
                            :data="scope.row.userTagNodeEntityList"
                            :props="defaultProps2"/>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div v-if="total3 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="realTimeQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total3"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, realTimeQuery, getRealTime)"
                    @current-change="(val) => pageChange(val, realTimeQuery, getRealTime)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="用户标签得分每日衰减" name="five">
            <el-card class="box-card">
              <div class="text item ">
                <el-row>
                  <el-col class="top-search">
                    <el-input
                      v-model="everyDayQuery.tagName"
                      size="small"
                      class="w-140"
                      placeholder="标签名称"/>
                    <label for="">得分类型</label>
                    <el-select v-model="everyDayQuery.scoreType" class="w-140" size="small">
                      <el-option key="-2" :value="0" label="全部"/>
                      <el-option key="4" :value="4" label="每日衰减得分"/>
                      <el-option key="5" :value="5" label="每日裁剪得分"/>
                    </el-select>
                    <el-date-picker
                      v-model="datePicker3"
                      class="w-340"
                      size="small"
                      type="datetimerange"
                      align="right"
                      value-format="yyyy-MM-dd HH:mm:ss"/>
                    <el-button size="small" type="primary" @click="searchSingleDay">搜索</el-button>
                  </el-col>
                </el-row>
                <el-row class="p-t-15">
                  <el-col>
                    <el-table :data="everydayData" border>
                      <el-table-column type="index" width="60" label="序号"/>
                      <el-table-column label="时间">
                        <template slot-scope="scope">
                          <span>{{ scope.row.logTime | timeFilter }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="rate" label="得分类型">
                        <template slot-scope="scope">
                          <span>{{ scoreTypeMap[scope.row.scoreType] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="标签等级">
                        <template slot-scope="scope">
                          <span>{{ tagLevelMap[scope.row.tagLevel] }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="tagName" label="标签名称"/>
                      <el-table-column prop="downValue" label="衰减值">
                        <template slot-scope="scope">
                          <span>{{ scope.row.downValue > 0 ? '+' + scope.row.downValue : scope.row.downValue }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div v-if="total4 > 0" class="block fr p-t-15 p-b-15">
                  <el-pagination
                    :current-page="everyDayQuery.index"
                    :page-sizes="[10, 15, 30]"
                    :page-size="15"
                    :total="total4"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="(val) => sizeChange(val, everyDayQuery, getSingleDay)"
                    @current-change="(val) => pageChange(val, everyDayQuery, getSingleDay)"/>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="DialogVisible" title="标签详情" width="1000px">
      <div>
        <div class="btn fr">
          <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
        </div>
        <div>
          <div id="tag" :style="{width: '900px'}"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts-wordcloud/dist/echarts-wordcloud';
import {
  getUserInfoApi,
  getTagInfoApi,
  getTagDetailApi,
  getKeyWordApi,
  getReadApi,
  getSearchHistoryApi,
  getCommendApi,
  getRealTimeDownScoreApi,
  getSingleTagDownScoreApi,
  getAllDurationApi,
  sv_newsCommendApi,
  getRecommendLevelOneApi,
  getRecommendlevelTwoApi,
  getRecommendlevelThreeApi
} from '@/api/recommended-analysis.js';
import timeUtils from '@/utils/timeHandle.js';
export default {
  filters: {
    timeFilter(val) {
      if (!val) {
        return;
      } else {
        return val.replace('T', ' ');
      }
    },
    minuteFilter(val) {
      if (!val) {
        return '0 秒';
      } else {
        if (val <= 59) {
          return `${val} 秒`;
        } else if (val == 60) {
          return ' 1 分';
        } else if (val > 60) {
          const minute = Math.floor(val / 60);
          const second = (val % 60);
          return `${minute} 分 ${second} 秒`;
        }
      }
    },
    titleFilter(val) {
      if (!val) return;
      return val.length > 15 ? val.slice(0, 15) + '...' : val;
    }
  },
  data() {
    return {
      activeName: 'first',
      activeName2: 'four',
      DialogVisible: false,
      datePicker1: [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ],
      datePicker2: [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ],
      datePicker3: [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ],
      datePicker4: [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ],
      datePicker5: [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ],
      options1: [{
        value: null,
        label: '全部'
      }, {
        value: 1,
        label: '图文'
      }, {
        value: 2,
        label: '图集'
      }, {
        value: 3,
        label: '视频'
      }, {
        value: 4,
        label: '小说'
      }, {
        value: 5,
        label: '微头条'
      }, {
        value: 6,
        label: '广告推广'
      }, {
        value: 8,
        label: '小视频'
      }],
      options2: [{
        value: 0,
        label: '全部'
      }, {
        value: 3,
        label: '最近阅读推荐策略'
      }, {
        value: 4,
        label: '热门推荐策略'
      }, {
        value: 6,
        label: '时效推荐策略'
      }, {
        value: 7,
        label: '长期推荐策略'
      }, {
        value: 8,
        label: '短期推荐策略'
      }, {
        value: 9,
        label: '搜索推荐策略'
      }],
      options3: [{
        value: null,
        label: '全部'
      }, {
        value: 1,
        label: '中文'
      }, {
        value: 2,
        label: '英/柬'
      }],
      topQuery: {// 顶部搜索参数
        memberId: null,
        userId: null,
        tel: null
      },
      readQuery: { // 阅读历史搜索参数
        index: 1,
        size: 15,
        title: null,
        newsId: null,
        tagName: null,
        newsType: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, ''),
        lang: null
      },
      searQuery: {// 阅读历史搜索参数
        index: 1,
        size: 15
      },
      recommendQuery: {// 阅读推荐搜索参数
        index: 1,
        size: 15,
        commendStrategy: 0,
        title: null,
        newsId: null,
        tagName: null,
        newsType: null,
        combineStrategyName: null,
        sortStrategyName: null,
        recallStrategyName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      },
      vlogQuery: {// 小视频推荐搜索参数
        index: 1,
        size: 15,
        // commendStrategy: 0,
        title: null,
        newsId: null,
        tagName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, ''),
        newsType: 8,
        combineStrategyName: null,
        sortStrategyName: null,
        recallStrategyName: null
      },
      realTimeQuery: { // 实时得分搜索参数
        index: 1,
        size: 15,
        scoreType: 0,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      },
      everyDayQuery: { // 每日得分搜索参数
        index: 1,
        size: 15,
        scoreType: 0,
        tagName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      },
      commonQuery: {

      },
      defaultProps: {
        children: 'children',
        label: function(data, node) {
          const myweight = Number(data.weight) ? Number(data.weight).toFixed(2) : 0;
          return (data.tagName || '') + '(' + myweight + ')';
        }
      },
      defaultProps2: {
        children: 'children',
        label: function(data, node) {
          let myscore = Number(data.score) ? Number(data.score).toFixed(2) : 0;
          myscore > 0 ? myscore = '+' + myscore : myscore; // 正数需要增加+
          return (data.tagName || '') + '(' + myscore + ')';
        }
      },
      userDetail: {}, // 用户详情
      userTagData: [], // 用户标签
      readHistoryData: [], // 阅读历史表格数据
      searchHistoryData: [], // 搜索历史表格数据
      recommendHistoryData: [], // 推荐历史表格数据
      vlogHistoryData: [], // 推荐历史表格数据
      RealTimeData: [], // 实时得分衰减表格
      everydayData: [], // 每日得分衰减表格
      echartData: [], // 标签详情数据
      durationData: [], // 用户使用时长表格数据
      scoreTypeMap: {
        0: '全部',
        1: '阅读得分',
        2: '不喜欢得分',
        3: '批次衰减得分',
        4: '每日衰减得分',
        5: '每日裁剪得分',
        6: '批次衰减补偿得分'
      },
      sourceTypeMap: { // 资讯来源
        '1': '爬虫',
        '2': '后台',
        '3': '自媒体'
      },
      tagLevelMap: {
        1: '一级',
        2: '二级',
        3: '三级'
      },
      newsTypeMap: {
        1: '图文',
        2: '图集',
        3: '视频',
        4: '小说',
        5: '微头条',
        6: '广告推广',
        8: '小视频'
      },
      recommendMap: {
        0: '全部',
        3: '最近阅读推荐策略',
        4: '热门推荐策略',
        6: '时效推荐策略',
        7: '长期推荐策略',
        8: '短期推荐策略',
        9: '搜索推荐策略'
      },
      myChart: null,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      total6: 0,
      tagsType: 'tag_ch',
      isChina2: true,
      readListFlag: true,
      isFilter: 1,
      restaurants: [],
      isCanBack: false,
      vlogRecommaned: { // 小视频推荐策略
        combineStrategy: [{
          value: null,
          label: '请选择组合推荐'
        }],
        recallStrategyName: [{
          value: null,
          label: '请选择召回推荐'
        }],
        sortStrategyName: [{
          value: null,
          label: '请选择排序推荐'
        }]
      },
      newsRecommaned: { // 资讯推荐策略
        combineStrategy: [{
          value: null,
          label: '请选择组合推荐'
        }],
        recallStrategyName: [{
          value: null,
          label: '请选择召回推荐'
        }],
        sortStrategyName: [{
          value: null,
          label: '请选择排序推荐'
        }]
      }

    };
  },
  created() {
    this.getRecommendOption(1);
    this.getRecommendOption2(1);
  },

  mounted() {
    this.getTelNum();

    if (this.$route.query.userId) {
      this.topQuery.userId = this.$route.query.userId;
      this.isCanBack = true;
      this.search1();
    }

    if (this.$route.query.memberId) {
      this.topQuery.memberId = this.$route.query.memberId;
      this.isCanBack = true;
      this.search1();
    }

    this.$nextTick(function() {
      this.initZhWordChart([]);
      this.initKmWordChart([]);
    });
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (String(restaurant.value).indexOf(String(queryString)) > -1);
      };
    },

    resetQuery() {
      this.datePicker1 = [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ];
      this.datePicker2 = [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ];
      this.datePicker3 = [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ];
      this.datePicker4 = [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ];
      this.datePicker5 = [
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      ];
      this.readQuery = {
        index: 1,
        size: 10,
        title: null,
        newsId: null,
        tagName: null,
        newsType: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      };
      this.searQuery = {
        index: 1,
        size: 10
      };
      this.recommendQuery = {
        index: 1,
        size: 15,
        commendStrategy: 0,
        title: null,
        newsId: null,
        tagName: null,
        newsType: null,
        combineStrategyName: null,
        sortStrategyName: null,
        recallStrategyName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      };
      this.vlogQuery = {
        index: 1,
        size: 15,
        title: null,
        newsId: null,
        tagName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, ''),
        newsType: 8,
        combineStrategyName: null,
        sortStrategyName: null,
        recallStrategyName: null
      };
      this.realTimeQuery = {
        index: 1,
        size: 10,
        scoreType: 0,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      };
      this.everyDayQuery = {
        index: 1,
        size: 10,
        scoreType: 0,
        tagName: null,
        beginTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6, ''),
        endTime: timeUtils.timeHandle(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1, '')
      };

      this.isFilter = 1;

      this.readHistoryData = []; // 阅读历史表格数据
      this.searchHistoryData = []; // 搜索历史表格数据
      this.recommendHistoryData = [];
      this.vlogHistoryData = [];
      this.RealTimeData = []; // 实时得分衰减表格
      this.everydayData = []; // 每日得分衰减表格
      this.total1 = 0;
      this.total2 = 0;
      this.total3 = 0;
      this.total4 = 0;
      this.total5 = 0;
      this.total6 = 0;
    },

    setTelNum(num) {
      const nums = JSON.parse(localStorage.getItem('tel')) || [];
      for (let i = 0; i < nums.length; i++) {
        if (nums[i].value == num) {
          return;
        }
      }

      if (nums.length < 5) {
        const obj = {
          value: num
        };
        nums.push(obj);
        localStorage.setItem('tel', JSON.stringify(nums));
      } else if (nums.length === 5) {
        nums.shift();
        const obj = {
          value: num
        };
        nums.push(obj);
        localStorage.setItem('tel', JSON.stringify(nums));
      }
    },

    getTelNum() {
      this.restaurants = JSON.parse(localStorage.getItem('tel')) || [];
    },

    filterChange() {
      const obj = Object.assign({}, this.topQuery, { isFilter: this.isFilter });
      this.getWordCloud(obj);
    },

    search1() {
      if (this.topQuery.userId && this.topQuery.memberId) {
        this.$message.warning('不能同时搜索用户ID和会员ID', true);
        return;
      }
      if (!this.topQuery.userId && !this.topQuery.memberId && !this.topQuery.tel) {
        this.$message.warning('请输入搜索条件', true);
        return;
      }
      this.getUserInfo(this.topQuery);
      this.getTagDetail(this.topQuery);

      const obj = Object.assign({}, this.topQuery, { isFilter: 1 });
      this.getWordCloud(obj);
    },

    // 用户详情
    getUserInfo(obj) {
      getUserInfoApi(obj).then(res => {
        if (res.code == 200) {
          this.commonQuery = this.topQuery; // 缓存共用搜索参数
          this.userDetail = res.data || {};
          if (Object.keys(this.userDetail).length === 0) {
            this.$message.warning('没有该用户的信息', true);
          } else {
            // 存储电话号码
            if (this.topQuery.tel) {
              this.setTelNum(this.topQuery.tel);
              this.getTelNum();
            }

            this.resetQuery();
            this.getReadHistory();
            this.getSearchHistory();
            this.getDuration();
            this.getRecommonedHistory();
            this.vlogRecommanedHistory();
            this.getRealTime();
            this.getSingleDay();
          }
        } else {
          this.userDetail = {};
          this.resetQuery();
        }
      }).catch(e => {
        this.userDetail = {};
        this.resetQuery();
      });
    },

    // 用户标签
    getTagDetail(obj) {
      getTagInfoApi(obj).then(res => {
        if (res.code == 200 && res.data.length && res.data.length > 0) {
          this.userTagData = res.data || [];

          const zhScore = this.userTagData[0][0] && this.userTagData[0][0].score ? this.userTagData[0][0].score * 1 : 0;
          const kmScore = this.userTagData[1][0] && this.userTagData[1][0].score ? this.userTagData[1][0].score * 1 : 0;

          if (kmScore > zhScore) {
            this.tagsType = 'tag_km';
            this.isChina2 = false;
          } else {
            this.tagsType = 'tag_ch';
            this.isChina2 = true;
          }
        } else {
          this.userTagData = [];
        }
      });
    },

    // 标签详情
    checkDetail() {
      let lang_int = 1;
      let isSmallVideo = 0;
      if (this.tagsType == 'tag_ch') { lang_int = 1; }
      if (this.tagsType == 'tag_km') { lang_int = 2; }
      if (this.tagsType == 'tag_sv_ch') {
        lang_int = 1;
        isSmallVideo = 1;
      }
      if (this.tagsType == 'tag_sv_km') {
        lang_int = 2;
        isSmallVideo = 1;
      }

      const lang = {
        lang: lang_int,
        isSmallVideo: isSmallVideo
      };
      const obj = Object.assign({}, this.topQuery, lang);
      getTagDetailApi(obj).then(res => {
        if (res.code == 200) {
          this.echartData = res.data;

          this.DialogVisible = true;

          this.$nextTick(function() {
            this.updateEchart();
          });
        }
      });
    },

    // 重新刷新echart
    refresh() {
      let lang_int = 1;
      if (this.tagsType == 'tag_ch') { lang_int = 1; }
      if (this.tagsType == 'tag_km') { lang_int = 2; }
      if (this.tagsType == 'tag_sv_ch') { lang_int = 1; }
      if (this.tagsType == 'tag_sv_km') { lang_int = 2; }

      const lang = {
        lang: lang_int
      };
      const obj = Object.assign({}, this.topQuery, lang);
      getTagDetailApi(obj).then(res => {
        if (res.code == 200) {
          this.echartData = res.data;
          this.updateEchart();
        }
      });
    },

    searchReadHistory() {
      this.readQuery.index = 1;
      this.getReadHistory();
    },

    searchRecommanedHistory() {
      this.recommendQuery.index = 1;
      this.getRecommonedHistory();
    },

    searchRealTime() {
      this.realTimeQuery.index = 1;
      this.getRealTime();
    },

    searchSingleDay() {
      this.everyDayQuery.index = 1;
      this.getSingleDay();
    },

    searchVlogHistory() {
      this.vlogQuery.index = 1;
      this.vlogRecommanedHistory();
    },

    // 获取用户关键词云图
    getWordCloud(obj) {
      if (!this.topQuery.userId && !this.topQuery.memberId && !this.topQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      getKeyWordApi(obj).then(res => {
        if (res.code == 200) {
          const zhData = res.data[0] || [];
          const kmData = res.data[1] || [];

          this.redirectionName(zhData);
          this.redirectionName(kmData);

          this.$nextTick(function() {
            this.initZhWordChart(zhData);
            this.initKmWordChart(kmData);
          });
        }
      });
    },

    // 阅读历史
    getReadHistory() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      if (this.datePicker1) {
        this.readQuery.beginTime = this.datePicker1[0];
        this.readQuery.endTime = this.datePicker1[1];
      } else {
        this.readQuery.beginTime = null;
        this.readQuery.endTime = null;
      }

      const obj = Object.assign({}, this.commonQuery, this.readQuery);
      this.readListFlag = false;
      getReadApi(obj).then(res => {
        if (res.code == 200) {
          this.readHistoryData = res.data || [];
          this.total1 = Number(res.count) || 0;
          this.readListFlag = true;
        } else {
          this.readListFlag = true;
        }
      }).catch(e => {
        this.readListFlag = true;
      });
    },

    // 搜索历史
    getSearchHistory() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      const obj = Object.assign({}, this.commonQuery, this.searQuery);
      getSearchHistoryApi(obj).then(res => {
        if (res.code == 200) {
          this.searchHistoryData = res.data || [];
          this.total2 = Number(res.count) || 0;
        }
      });
    },

    // 推荐历史
    getRecommonedHistory() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      if (this.datePicker4) {
        this.recommendQuery.beginTime = this.datePicker4[0];
        this.recommendQuery.endTime = this.datePicker4[1];
      } else {
        this.recommendQuery.beginTime = null;
        this.recommendQuery.endTime = null;
      }

      const obj = Object.assign({}, this.commonQuery, this.recommendQuery);
      getCommendApi(obj).then(res => {
        if (res.code == 200) {
          this.recommendHistoryData = res.data;
          this.total5 = Number(res.count) || 0;
        } else {
          this.recommendHistoryData = [];
          this.total5 = 0;
        }
      }).catch(e => {
        this.recommendHistoryData = [];
        this.total5 = 0;
      });
    },

    // 小视频推荐
    vlogRecommanedHistory() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      if (this.datePicker5) {
        this.vlogQuery.beginTime = this.datePicker5[0];
        this.vlogQuery.endTime = this.datePicker5[1];
      } else {
        this.vlogQuery.beginTime = null;
        this.vlogQuery.endTime = null;
      }

      const obj = Object.assign({}, this.commonQuery, this.vlogQuery);
      sv_newsCommendApi(obj).then(res => {
        if (res.code == 200) {
          this.vlogHistoryData = res.data;
          this.total6 = Number(res.count) || 0;
        } else {
          this.vlogHistoryData = [];
          this.total6 = 0;
        }
      }).catch(e => {
        this.vlogHistoryData = [];
        this.total6 = 0;
      });
    },

    getDuration() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      const obj = Object.assign({}, this.commonQuery);
      getAllDurationApi(obj).then(res => {
        if (res.code == 200) {
          this.durationData = res.data || [];
        }
      });
    },

    // 实时衰减
    getRealTime() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      if (this.datePicker2) {
        this.realTimeQuery.beginTime = this.datePicker2[0];
        this.realTimeQuery.endTime = this.datePicker2[1];
      } else {
        this.realTimeQuery.beginTime = null;
        this.realTimeQuery.endTime = null;
      }

      const obj = Object.assign({}, this.commonQuery, this.realTimeQuery);
      getRealTimeDownScoreApi(obj).then(res => {
        if (res.code == 200) {
          this.RealTimeData = res.data || [];
          this.total3 = Number(res.count) || 0;
        }
      });
    },

    // 每日衰减
    getSingleDay() {
      if (!this.commonQuery.userId && !this.commonQuery.memberId && !this.commonQuery.tel) {
        this.$message.warning('用户ID,会员ID,手机号不能同时为空', true);
        return;
      }

      if (this.datePicker3) {
        this.everyDayQuery.beginTime = this.datePicker3[0];
        this.everyDayQuery.endTime = this.datePicker3[1];
      } else {
        this.everyDayQuery.beginTime = null;
        this.everyDayQuery.endTime = null;
      }

      const obj = Object.assign({}, this.commonQuery, this.everyDayQuery);
      getSingleTagDownScoreApi(obj).then(res => {
        if (res.code == 200) {
          this.everydayData = res.data || [];
          this.total4 = Number(res.count) || 0;
        }
      });
    },

    sizeChange(val, query, cb) {
      query.size = val;
      cb();
    },

    pageChange(val, query, cb) {
      query.index = val;
      cb();
    },

    // 将对象属性名由tagName 改为 name
    changeName(json) {
      for (var i in json) {
        for (var j in json[i]) {
          if (j == 'tagName') {
            json[i]['name'] = json[i][j] + '(' + json[i]['score'] + ')';
            delete json[i]['tagName'];
            if (json[i].children) {
              this.changeName(json[i].children);
            }
          }
        }
      }
    },

    // 将对象属性名由tagName 改为 name weight 改为 name
    redirectionName(json) {
      for (var i in json) {
        for (var j in json[i]) {
          if (j == 'tagName') {
            json[i]['name'] = json[i][j];
            delete json[i]['tagName'];
          }
          if (j == 'weight') {
            json[i]['value'] = json[i][j];
            delete json[i]['weight'];
          }
        }
      }
    },

    initZhWordChart(data) {
      const myChart = echarts.init(document.getElementById('word-zh'));
      const option = {
        title: {
          show: Object.keys(data).length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },

        tooltip: {
          show: true
        },
        backgroundColor: '#fff',
        // tooltip: {
        //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        // },
        series: [
          {
            type: 'wordCloud',
            // 用来调整词之间的距离
            gridSize: 10,
            // 用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 60],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            // 随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                                        Math.round(Math.random() * 255) +
                                        ', ' +
                                        Math.round(Math.random() * 255) +
                                        ', ' +
                                        Math.round(Math.random() * 255) +
                                        ')'
                  );
                }
              }
            },
            // 位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '200%',
            height: '200%',
            // 数据
            data: data
          }
        ]
      };
      myChart.setOption(option);
      myChart.off('click');
      const self = this;
      myChart.on('click', function(params) {
        if (!self.readListFlag) {
          self.$message.warning('点击频率过快, 请稍候...', true);
          return;
        }
        self.readQuery.tagName = params.name;
        self.activeName = 'first';
        self.getReadHistory();
      });
    },

    initKmWordChart(data) {
      const myChart = echarts.init(document.getElementById('word-km'));
      const option = {
        tooltip: {
          show: true
        },
        title: {
          show: Object.keys(data).length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        backgroundColor: '#fff',
        // tooltip: {
        //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        // },
        series: [
          {
            type: 'wordCloud',
            // 用来调整词之间的距离
            gridSize: 10,
            // 用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 60],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            // 随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                                        Math.round(Math.random() * 255) +
                                        ', ' +
                                        Math.round(Math.random() * 255) +
                                        ', ' +
                                        Math.round(Math.random() * 255) +
                                        ')'
                  );
                }
              }
            },
            // 位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '200%',
            height: '200%',
            // 数据
            data: data
          }
        ]
      };
      myChart.setOption(option);
      myChart.off('click');
      const self = this;
      myChart.on('click', function(params) {
        if (!self.readListFlag) {
          self.$message.warning('点击频率过快, 请稍候...', true);
          return;
        }
        self.readQuery.tagName = params.name;
        self.getReadHistory();
      });
    },

    updateEchart() {
      this.myChart = echarts.init(document.getElementById('tag'));
      this.myChart.showLoading();
      this.changeName(this.echartData);
      const data = Object.assign({}, { name: '' }, { children: this.echartData });

      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',

            data: [data],

            top: '1%',
            left: '1%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,
            initialTreeDepth: 3, // 默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，...
            label: {
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 12
              }
            },

            leaves: {
              label: {
                normal: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };

      this.myChart.setOption(option, true);
      this.myChart.hideLoading();

      // 动态调整echart高度
      const autoHeight = this.echartData.length * 200 > 600 ? this.echartData.length * 200 : 600;
      this.myChart.getDom().style.height = autoHeight + 'px';
      this.myChart.getDom().childNodes[0].style.height = autoHeight + 'px';
      this.myChart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight);
      this.myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + 'px';
      this.myChart.resize();
    },

    goBack() {
      this.$router.go(-1); // 返回上一层
    },

    // 获取小视频推荐策略
    getRecommendOption(level, combineStrategyName, sortStrategyName) {
      if (level === 1) {
        this.vlogRecommaned = {
          // 小视频推荐策略
          combineStrategy: [
            {
              value: null,
              label: '请选择组合推荐'
            }
          ],
          recallStrategyName: [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ],
          sortStrategyName: [
            {
              value: null,
              label: '请选择排序推荐'
            }
          ]
        };
        this.vlogQuery.combineStrategyName = null;
        this.vlogQuery.sortStrategyName = null;
        this.vlogQuery.recallStrategyName = null;

        getRecommendLevelOneApi({ compareType: 3 }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.length) {
              const arr = res.data;
              for (let i = 0; i < arr.length; i++) {
                const obj = {
                  value: arr[i].combineStrategyName,
                  label: arr[i].combineStrategyName
                };

                if (
                  JSON.stringify(
                    this.vlogRecommaned.combineStrategy
                  ).indexOf(JSON.stringify(obj)) == -1
                ) {
                  this.vlogRecommaned.combineStrategy.push(obj);
                }
              }
            }
          }
        });
      } else if (level === 2) {
        this.vlogRecommaned.sortStrategyName = [
          {
            value: null,
            label: '请选择排序推荐'
          }
        ];
        this.vlogRecommaned.recallStrategyName = [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ];

        this.vlogQuery.sortStrategyName = null;
        this.vlogQuery.recallStrategyName = null;

        if (combineStrategyName == null) return;

        getRecommendlevelTwoApi({ compareType: 3, combineStrategyName }).then(
          res => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].sortStrategyName,
                    label: arr[i].sortStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.vlogRecommaned.sortStrategyName
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.vlogRecommaned.sortStrategyName.push(obj);
                  }
                }
              }
            }
          }
        );
      } else if (level === 3) {
        this.vlogRecommaned.recallStrategyName = [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ];

        this.vlogQuery.recallStrategyName = null;
        if (sortStrategyName == null) return;

        getRecommendlevelThreeApi({
          compareType: 3,
          combineStrategyName,
          sortStrategyName
        }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.length) {
              const arr = res.data;
              for (let i = 0; i < arr.length; i++) {
                const obj = {
                  value: arr[i].recallStrategyName,
                  label: arr[i].recallStrategyName
                };

                if (
                  JSON.stringify(
                    this.vlogRecommaned.recallStrategyName
                  ).indexOf(JSON.stringify(obj)) == -1
                ) {
                  this.vlogRecommaned.recallStrategyName.push(obj);
                }
              }
            }
          }
        });
      }
    },

    // 获取历史推荐推荐策略
    getRecommendOption2(level, combineStrategyName, sortStrategyName) {
      if (level === 1) {
        this.newsRecommaned = {
          // 小视频推荐策略
          combineStrategy: [
            {
              value: null,
              label: '请选择组合推荐'
            }
          ],
          recallStrategyName: [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ],
          sortStrategyName: [
            {
              value: null,
              label: '请选择排序推荐'
            }
          ]
        };
        this.recommendQuery.combineStrategyName = null;
        this.recommendQuery.sortStrategyName = null;
        this.recommendQuery.recallStrategyName = null;

        getRecommendLevelOneApi({ compareType: 1 }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.length) {
              const arr = res.data;
              for (let i = 0; i < arr.length; i++) {
                const obj = {
                  value: arr[i].combineStrategyName,
                  label: arr[i].combineStrategyName
                };

                if (
                  JSON.stringify(
                    this.newsRecommaned.combineStrategy
                  ).indexOf(JSON.stringify(obj)) == -1
                ) {
                  this.newsRecommaned.combineStrategy.push(obj);
                }
              }
            }
          }
        });
      } else if (level === 2) {
        this.newsRecommaned.sortStrategyName = [
          {
            value: null,
            label: '请选择排序推荐'
          }
        ];
        this.newsRecommaned.recallStrategyName = [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ];

        this.recommendQuery.sortStrategyName = null;
        this.recommendQuery.recallStrategyName = null;

        if (combineStrategyName == null) return;

        getRecommendlevelTwoApi({ compareType: 1, combineStrategyName }).then(
          res => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].sortStrategyName,
                    label: arr[i].sortStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.newsRecommaned.sortStrategyName
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.newsRecommaned.sortStrategyName.push(obj);
                  }
                }
              }
            }
          }
        );
      } else if (level === 3) {
        this.newsRecommaned.recallStrategyName = [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ];

        this.recommendQuery.recallStrategyName = null;
        if (sortStrategyName == null) return;

        getRecommendlevelThreeApi({
          compareType: 1,
          combineStrategyName,
          sortStrategyName
        }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.length) {
              const arr = res.data;
              for (let i = 0; i < arr.length; i++) {
                const obj = {
                  value: arr[i].recallStrategyName,
                  label: arr[i].recallStrategyName
                };

                if (
                  JSON.stringify(
                    this.newsRecommaned.recallStrategyName
                  ).indexOf(JSON.stringify(obj)) == -1
                ) {
                  this.newsRecommaned.recallStrategyName.push(obj);
                }
              }
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 15px;
    .go-back {
        padding: 15px 0;
    }
    .tip {
        font-size: 18px;
        font-weight: bold;
        line-height: 48px;
    }
    .w-140 {
        width: 140px;
    }
    .w-160 {
        width: 160px;
    }
    .w-260 {
        width: 260px;
    }
    .w-340 {
        width: 340px;
    }
    .p-t-35 {
        padding-top: 35px;
    }
    .top-search {
        text-align: right;
        label {
            font-size: 12px;
            font-weight: 400;
            margin-right: 5px;
        }
    }
    .user-detail {
        height: 126px;
        font-size: 14px;
        line-height: 18px;
        span {
            margin-right: 5px;
        }
    }
    .user-tag {
        height: 126px;
        .tag-item {
            float: left;
            width: 230px;
            height: 126px;
            margin-left: 50px;
            background: #f2f8ff;
            font-weight: bolder;
            .top {
                font-size: 16px;
                line-height: 48px;
                text-align: center;
                font-weight: bolder;
            }
            .left-label {
                display: inline-block;
                font-size: 16px;
                line-height: 20px;
                margin: 0 10px;
                width: 110px;
                text-align: left;
                font-weight: bolder;
            }
            span {
                font-weight: bolder;
            }
        }
        .tag-item-btn {
            float: left;
            width: 230px;
            height: 126px;
            padding: 36px 0 0 50px;
        }
    }
    .left-lable {
        display: inline-block;
        width: 45px;
    }
    .opt {
        .tag-left {
            width: 70px;
            margin: 5px;
            float: left;
            text-align: center;
        }
    }
    .nodata {
        line-height: 146px;
        font-size: 14px;
        text-align: center;
        color: #909399;
    }
    .link:hover {
        color: blue;
    }
    /* 隐藏暂无内容 */
    .tree {
        & /deep/ .el-tree__empty-block {
            display: none;
        }
    }
    .tab-item {
        display: inline-block;
        margin: -10px 0;
        padding: 10px 0;
        margin-right: 20px;
    }
    .tab-item:hover {
        cursor: pointer;
    }
    .active {
        color: #409eff;
    }
    .user-word {
        .word {
            margin: 0 auto;
        }
    }
}
</style>
